<template>
  <el-container class="height100  bigBgColor">
    <el-container direction="vertical" 
    v-loading="loading"
    :element-loading-text="$t('msg_syn')"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)" class="dingdingCon">
      <div  class="width100 height100 overflowy">
        <div class="partContent">
          <el-form
          :model="DingConfigs"
          ref="DingConfigs"
          label-position="top"
          label-width="180px"
          size="small"
          :rules="rules"
        >
          <div class="part padding0">
        <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick"/>
        <div class="partForm">
          <el-form :inline="true" class="demo-form-inline wexinForm rowItem">
          <el-form-item :label="$t('activate_dingding')">
            <el-radio-group v-model="DingConfigs.dingdingProxyType" @change="changeShow">
              <el-radio label="none">{{$t('no_dingding_service')}}</el-radio>
              <el-radio label="EnterpriseDingding">{{$t('enterprise_dingding')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div v-show="DingConfigs.dingdingProxyType=='cloud'">
          <a
            class="d-inline-block obpm-btn obpm-btn-primary"
            :href="'http://yun.weioa365.com/Ding/main?siteId=Z1IED1IEA1M&amp;domainId='+$route.query.domainid"
            target="_blank"
          >{{$t('startup')}}</a>
        </div>

          <el-row v-show="DingConfigs.dingdingProxyType=='EnterpriseDingding'">
            <el-col :span="5">
              <el-form-item :label="$t('dingdingCorpID')" prop="dingdingCorpID"   >
                <el-input v-model="DingConfigs.dingdingCorpID" :placeholder="$t('placeholder_enter_content')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5"  :offset="3">
              <el-form-item :label="$t('dingdingServerHost')" prop="dingdingServerHost"   >
                <el-input v-model="DingConfigs.dingdingServerHost"  placeholder="http://www.xxx.com/static"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
        </div>
      </div>
      <div class="part" v-show="DingConfigs.dingdingProxyType=='EnterpriseDingding'">
          <el-row>
            <el-col><p class="smallHeader">{{$t('address_book_application')}}</p></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('dingdingAgentId')" prop="dingdingAgentId"   >
                <el-input v-model="DingConfigs.dingdingAgentId" :placeholder="$t('placeholder_enter_content')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('dingdingKey')" prop="dingdingAppKey"   >
                <el-input v-model="DingConfigs.dingdingAppKey" :placeholder="$t('placeholder_enter_content')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" >
              <el-form-item :label="$t('dingdingSecret')" prop="dingdingAppSecret"  class="verifyItem">
                <el-input v-model="DingConfigs.dingdingAppSecret">
                  <template slot="append">
                    <el-button plain type="primary" @click="onVerifyBtnClick">{{$t('verify_link')}}</el-button>
                 </template>
                </el-input>
              </el-form-item>
            </el-col> 
          </el-row>
        </div>
          <div class="part" v-show="DingConfigs.dingdingProxyType=='EnterpriseDingding'">
          <el-row>
            <el-col><p class="smallHeader">{{$t('scancode')}}</p></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('dingdingQrCodeAppId')" prop="dingdingQrCodeAppId"   >
                <el-input v-model="DingConfigs.dingdingQrCodeAppId" :placeholder="$t('placeholder_enter_content')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('dingdingQrCodeAppSecret')" prop="dingdingQrCodeAppSecret"   >
                <el-input v-model="DingConfigs.dingdingQrCodeAppSecret" :placeholder="$t('placeholder_enter_content')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('dingdingQrCodeCallbackUrl')" prop="dingdingQrCodeCallbackUrl"   >
                <el-input v-model="DingConfigs.dingdingQrCodeCallbackUrl"  placeholder="http://www.xxx.com/signon/api/runtime/login/ddqrcodelogin"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </div>
      <div class="part" v-show="DingConfigs.dingdingProxyType=='EnterpriseDingding'">
        <p class="smallHeader">{{$t('enabled_software')}}</p>

        <el-table
          :data="DingConfigs.apps"
          class="el-table-w marginT24"
          header-cell-class-name="tableHeaderbg"
          size="small"
        >
          <el-table-column prop="name" :label="$t('software_name')" width="180"></el-table-column>
          <el-table-column prop="description" :label="$t('description')" width="180"></el-table-column>
          <el-table-column :label="$t('dingdingAppAgentId')">
            <template slot-scope="scope">
              <i class="iconfont icon-Frame" @click="editAgentId(scope.row)"></i>
              <span>{{scope.row.dingdingAgentId}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('dingdingAppKey')">
            <template slot-scope="scope">
              <i class="iconfont icon-Frame" @click="editAppkey(scope.row)"></i>
              <span>{{scope.row.dingdingAppKey}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('dingdingAppSecret')">
            <template slot-scope="scope">
              <i class="iconfont icon-Frame" @click="editSecret(scope.row)"></i>
              <span>{{scope.row.dingdingAppSecret}}</span>
              <!-- <el-input type="text" v-model="scope.row.DingSecret"  @blur="onSaveDingSecret(scope.row)" /> -->
            </template>
          </el-table-column>
          <el-table-column :label="$t('dingdingURL')">
            <template slot-scope="scope">
              <el-button @click="genDingURL(scope.row)" type="primary" plain size="small">{{$t('jumplink')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
      </div>
    </el-container>
    <ding_result :visible.sync="DingResultVisible" :DingResult="DingResult" />
    <dingUrl :visible.sync="dingUrlVisible" v-if="dingUrlVisible" :dingUrlResult="dingUrlResult" :dingUrlTitle="$t('dingdingConfig')"/>

  </el-container>
</template>

<script>
import ding_result from "@/components/ding_result.vue";
import dingUrl from "@/components/dingUrl.vue";
export default {
  components:{
    ding_result,
    dingUrl,
  },
  created() {
    this.$api.getDingConfig(
      { domainid: this.$route.query.domainid},
      {
        onSucess: resp => {
          
          this.DingConfigs = resp.data.data;
          this.changeShow()
        }
      }
    );
     //关于标题的处理
     this.headerArr={iconfont:'icon-icon_ddpz',content:this.$t('dingdingConfig'),listHeaderClass:'noListHeader', btnArr:[{type:'primary',name:'save',label:this.$t('save')}] }
  },
  data() {
    return {
      scrollHeight: null,
      DingConfigs: {},
      DingResultVisible:false,
      DingResult:{},
      loading:false,
      isnotEditAgentId:true,
      isEditAgentId:false,
      rules:{
        dingdingCorpID:[
          { required: true, message: this.$t('dingding_corporation_id'), trigger: 'blur'}
        ],
        dingdingServerHost:[
          {required: true, message: this.$t('wechat_access_system'), trigger: 'blur'}
        ],
        dingdingAgentId:[
          {required: true, message: this.$t('wechat_address_book')+'AgentId', trigger: 'blur'}
        ],
        dingdingAppKey:[
          {required: true, message: this.$t('wechat_address_book')+'AppKey', trigger: 'blur'}
        ],
        dingdingAppSecret:[
          {required: true, message: this.$t('wechat_address_book')+'AppSecret', trigger: 'blur'}
        ],
        
      },
      dingUrlVisible:false,
      dingUrlResult:null,
      headerArr:{}
    };
  },
  methods: {
    onBtnClick(name){
      if(name=='save'){this.onSaveBtnClick('DingConfigs')}
      else if(name=='sync_dinging2org'){this.onSync2Ding()}
      else if(name=='sync_dingding2domain'){this.onSynFromDing()}
    },
    changeShow(){
      let temp=[],tempArr=[]
      if(this.DingConfigs.dingdingProxyType=='EnterpriseDingding'){
         tempArr=[{name:"sync_dinging2org",label:this.$t('sync_dinging2org')},{name:"sync_dingding2domain",label:this.$t('sync_dingding2domain')}]
         temp=[...this.headerArr.btnArr,...tempArr]
      }else{
         temp=[this.headerArr.btnArr.shift()]
      }
      this.$set(this.headerArr,"btnArr",temp)
    },
    //保存按钮
    onSaveBtnClick(formName) {
      for(let k in this.DingConfigs){
        if(typeof this.DingConfigs[k]=="string")
        this.DingConfigs[k]=this.DingConfigs[k].replace(/^\s*/,"")
      }
      this.$refs[formName].validate((valid) => {
        if (valid||this.DingConfigs.dingdingProxyType=='none') {
          this.$api.updateDingConfig(
            { domainid: this.$route.query.domainid, data: this.DingConfigs },
            {
              onSucess: resp => {
                if (resp.data.errcode == 0) {
                  this.$message({
                    showClose: true,
                    message: this.$t('msg_save_success'),
                    type: "success"
                  });
                } else {
                  this.$message({
                    showClose: true,
                    message: resp.data.errmsg,
                    type: "error"
                  });
                }
              }
            }
          );
        } else {
          return false;
        }
      });  
    },
    //保存单个的钉钉应用agentid
    onSaveDingAgentId(row){
      this.$api.saveDingAgentId(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          id:row.dingdingAgentId,
        },
        {
          onSucess: () => {
            
          }
        }
      );
    },
    //保存单个的钉钉应用appkey
    onSaveDingAppkey(row){
      this.$api.saveDingAppkey(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          appkey:row.dingdingAppKey,
        },
        {
          onSucess: () => {
            
          }
        }
      );
    },
    //保存单个的钉钉应用secret
    onSaveDingSecret(row){
      this.$api.saveDingSecret(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
          secret:row.dingdingAppSecret,
        },
        {
          onSucess: () => {
            
          }
        }
      );
    },
    //验证连接
    onVerifyBtnClick() {
      if(this.DingConfigs.dingdingAppKey == "" || this.DingConfigs.dingdingAppSecret == ""){
        this.$message({
          showClose: true,
          message: this.$t('msg_timeout'),
          type: "error"
        });
        return false;
      }
      this.$api.verifyDingConfig(
        {
          domainid: this.$route.query.domainid,
          appkey: this.DingConfigs.dingdingAppKey,
          appsecret: this.DingConfigs.dingdingAppSecret,
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.$message({
                showClose: true,
                message: this.$t('msg_verified_success'),
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: this.$t('msg_verified_failed'),
                type: "error"
              });
            }
          }
        }
      );
    },
    //生成跳转链接
    genDingURL(row) {
      if(row.dingdingAgentId==""||row.dingdingAgentId==null){
        this.$message({
          showClose: true,
          message: this.$t('msg_require_dingdingAgentId'),
          type: "error"
        });
        return false;
      }else if(row.dingdingAppKey==""||row.dingdingAppKey==null){
        this.$message({
          showClose: true,
          message: this.$t('msg_require_dingdingAppKey'),
          type: "error"
        });
        return false;
      }else if(row.dingdingAppSecret==""||row.dingdingAppSecret==null){
        this.$message({
          showClose: true,
          message: this.$t('msg_require_dingdingAppSecret'),
          type: "error"
        });
        return false;
      }
      this.$api.genDingURL(
        {
          domainid: this.$route.query.domainid,
          applicationid: row.id,
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.dingUrlResult=resp.data.data;
              this.dingUrlVisible=true;
            } else {
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          }
        }
      );
    },
    //同步钉钉到域(租户)
    onSynFromDing(){
      this.loading=true;
      this.$api.synFromDing(
        {
          domainid: this.$route.query.domainid,
        },
        {
          onSucess: resp => {
            
            if (resp.data.errcode == 0) {
              this.DingResult={}
              this.DingResult=resp.data.data;
              this.loading=false;
              this.DingResultVisible=true;
            } 
          },
          onError:(resp) => {
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      );
    },
    //同步域(租户)到钉钉
    onSync2Ding(){
      this.loading=true;
      this.$api.sync2Ding(
        {
          domainid: this.$route.query.domainid,
        },
        {
          onSucess: resp => {
            if (resp.data.errcode == 0) {
              this.DingResult={}
              this.DingResult=resp.data.data;
              this.loading=false;
              this.DingResultVisible=true;

            } 
            
          },
          onError:(resp) => {
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      );
    },
    //编辑单个的钉钉应用agentid
    editAgentId(row){
      this.$prompt(this.$t('enter_dingding_agentid'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(({ value }) => {
        row.dingdingAgentId=value;
        this.onSaveDingAgentId(row,value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('msg_cancel')
        });       
      });
    },
    //编辑单个的钉钉应用appkey
    editAppkey(row){
      this.$prompt(this.$t('enter_dingding_appkey'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(({ value }) => {
        row.dingdingAppKey=value;
        this.onSaveDingAppkey(row,value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('msg_cancel')
        });       
      });
    },
    editSecret(row){
      this.$prompt(this.$t('enter_dingding_secret'), '', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(({ value }) => {
        row.dingdingAppSecret=value;
        this.onSaveDingSecret(row,value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('msg_cancel')
        });       
      });
    }
  },
  mounted(){
    this.scrollHeight=(document.documentElement.clientHeight || document.body.clientHeight) - 90
  },
};
</script>

<style>
</style>